<template>
	<view class="tui-addr-box">
		<uni-forms :modelValue="form" ref="form" :rules="rules">
			<uni-forms-item name="nickName" required label="联系人">
				<uni-easyinput v-model="form.nickName" type="text" placeholder="请输入联系人" />
			</uni-forms-item>
			<uni-forms-item required label="手机号" name="phoneNum">
				<uni-easyinput type="number" v-model="form.phoneNum" maxlength="11" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item required label="选择地址" label-width="100">
				<!-- @tap.stop="openMAP" -->
				<view @click="jumpMap" class="map"  v-if="!form.detailAddress">
					<uni-icons type="map-pin-ellipse" size="30" color="orange" />请选择取件地址
				</view>
				<view class="" style="display: flex;" v-else>
					<view class="" style="flex: 1;font-size: 24rpx;width: 300rpx;">
						<view class="" style="width: 100%;font-weight: bold;font-size: 30rpx;margin-bottom: 10rpx;">
							{{form.addressName}}
						</view>
						<view class="" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
							{{form.detailAddress}}
						</view>
						
					</view>
					<view class="" style="color: #fe7002;margin-left: 20rpx;display: flex;align-items: center;justify-content: center;" @click="jumpMap">
						修改地址
					</view>
				</view>
			</uni-forms-item>
			<!-- <uni-forms-item required name="adcode" label="省市区">
				<view style="display: flex;justify-content: space-between;">
					<uni-data-picker v-model="form.adcode" :localdata="items" popup-title="请选择省份" @change="onchange"
						style="width: 100%;" />
				</view>
			</uni-forms-item> -->
		<uni-forms-item name="detailAddress" required label="详细地址" label-width="100">
			<uni-easyinput v-model="form.areaAddress" type="textarea"
				placeholder="详细地址，楼号和门牌号"  />
				<!-- @input="searchVal" @focus="warn" -->
		</uni-forms-item>
			<!-- 	<uni-forms-item name="default" label="默认地址" label-width="100">
				<tui-switch :checked="form.default" @change="changeDefault" />
			</uni-forms-item> -->
		</uni-forms>
		<view class="tui-list-view" v-if="searchFlag">
			<tui-list-cell v-for="(item, index) in result" :key="index" @click="choose(index)">
				<view class="thorui-flex">
					<tui-icon name="position" color="#888" :size="20"></tui-icon>
					<view class="tui-addr__box">
						<view class="tui-addr-title">{{ item.name }}</view>
						<view class="tui-addr-detail">{{ item.address }}</view>
						<!-- <view class="tui-tag" v-if="item.type > 0 && item.type < 5">{{getType(item.type) }}</view> -->
					</view>
				</view>
			</tui-list-cell>
		</view>
		<view class="tui-addr-save">
			<tui-button shadow type="brown" height="80rpx" shape="circle"
				@click="saveAddress">保存收货地址</tui-button>
		</view>
		<view class="tui-del" v-if="false">
			<tui-button shadow type="gray" height="80rpx" shape="circle">删除收货地址</tui-button>
		</view>
	</view>
</template>

<script>
	import {
		businessAddress,
areacodeSearch
	} from '@/api/index'
	import {
		proCityList
	} from '@/util/city.js'
	export default {
		data() {
			return {
				longitude:'',
				latitude:'',
				adcode: '',
				items: proCityList,
				form: {
					nickName: '',
					phoneNum: "",
					detailAddress: "",
					adcode: "",
					default: false,
					fullAddress: '',
					cityName: '',
					province: '',
					addressType: '',
					areaAddress:'',
					addressName:''
				},
				rules: {
					nickName: {
						rules: [{
							required: true,
							errorMessage: '请输入联系人',
						}]
					},
					phoneNum: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},

							{
								validateFunction(rule, value, data, callback) {
									const reg = /^1[3-9]\d{9}$/; // 手机号正则表达式
									if (reg.test(value)) {
										callback(); // 校验通过
									} else {
										callback('请输入正确的手机号'); // 校验不通过，给出错误信息
									}
									return true
								}, // 自定义校验函数
							}
						]
					},
					adcode: {
						rules: [{
							required: true,
							errorMessage: '请选择省市区',
						}]
					},
					detailAddress: {
						rules: [{
							required: true,
							errorMessage: '请输入详细地址',
						}]
					}
				},
				id: "",
				type: null,
				result: [],
				searchFlag: false,
			}
		},
		onLoad(option) {
			console.log(option);

			if (option.id !== 'undefined') {
				this.id = option.id
				this.getData()
			}
			if (option.type) {
				this.type = option.type
			}
		},
		onShow() {
			console.log(123123)
			var sendAddress = uni.getStorageSync('sendAddress')
			
			if(sendAddress){
				
				this.form.detailAddress = sendAddress.province + sendAddress.city + sendAddress.district+ sendAddress.address
				console.log(this.form.detailAddress)
				this.form.addressName = sendAddress.name
				this.form.province = sendAddress.province
				this.form.adcode = sendAddress.adcode
				this.form.city = sendAddress.city
				this.form.cityName = sendAddress.city
				let location = sendAddress.location.split(",")
				this.form.latitude = location[1]
				this.form.longitude = location[0]
				uni.removeStorageSync('sendAddress')
			}
		},
		methods: {
			jumpMap(){
				uni.navigateTo({
					url:"/pages/map/map"
				})
			},
			warn() {
				if (!this.form.province) {
					uni.showToast({
						title: '请先选择省市区',
						icon: 'none'
					});
					return
				}
			},
			choose(index) {
				if (this.result.length === 0) return;
				let item = this.result[index];
				this.latitude = item.location.lat
				this.longitude = item.location.lng
					this.form.detailAddress =  item.address + '-'+item. name
				this.searchFlag = false
			},
			searchVal(val) {
				this.searchFlag = true
				let params = {
					name: val,
					city: this.form.cityName
				}
				areacodeSearch(params, 'get')
					.then((res) => {
						this.result = res
					})
			},
			getData() {
				console.log(this.id)
				businessAddress({}, 'get', this.id)
					.then((res) => {
						console.log(res)
						if(res.data){
							this.form.adcode = res.data.areaCode
							this.form.nickName = res.data.nickName
							this.form.phoneNum = res.data.phoneNum
							this.form.detailAddress = res.data.detailAddress
							this.form.province = res.data.province
							this.form.cityName = res.data.cityName
							this.form.latitude = res.data.latitude
							this.form.longitude = res.data.longitude
							this.type = res.data.addressType
							this.latitude = res.data.latitude
							this.longitude = res.data.longitude
							this.form.default = res.data.isDefault ? true : false
						}
						
						if (res.code == 200) {} else {
							// uni.showToast({
							// 	title: res.msg,
							// 	icon: 'none'
							// });
						}
					})
			},
			onchange(e) {
				this.form.province = ''
				const value = e.detail.value
				this.form.cityName = value[1].text
				for (var i = 0; i < value.length; i++) {
					this.form.province += value[i].text
				}
			},
			changeDefault(e) {
				this.form.default = e.detail.value
			},
			saveAddress() {
				this.form.fullAddress = ""
				this.form.fullAddress = this.form.province + this.form.detailAddress
				this.$refs.form.validate().then(res => {
					uni.hideLoading()
					console.log('表单数据信息：', this.form);
					let params = {
						addressType: this.type,
						areaCode: this.form.adcode,
						detailAddress: this.form.detailAddress,
						isDefault: this.form.default ? 1 : 0,
						nickName: this.form.nickName,
						openId: uni.getStorageSync('user').openid,
						phoneNum: this.form.phoneNum,
						fullAddress: this.form.fullAddress,
						province: this.form.province,
						cityName: this.form.cityName,
						longitude: this.form.longitude,
						latitude: this.form.latitude,
						addressName: this.form.addressName
					}
					console.log(params);
					if (this.id) {
						params.id = this.id
						businessAddress(params, 'put')
							.then((res) => {
								console.log(res);
								if (res.code == 200) {
									uni.showToast({
										title: '修改成功',
										duration: 2000
									});
									uni.navigateTo({
										url: `/pages/address/address?type=${this.type}`,
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							})
					} else {
						businessAddress(params, 'post')
							.then((res) => {
								console.log(res);
								if (res.code == 200) {
									uni.showToast({
										title: '添加成功',
										duration: 2000
									});
									uni.navigateTo({
										url: `/pages/address/address?type=${this.type}`,
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							})
					}


				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style  scoped>
	.map{
		background: rgb(255, 255, 255);
		color: rgb(255, 143, 0);
		box-shadow: none;
		border: 1px solid rgb(255, 143, 0) !important;
		border-radius: 50px;
		padding: 6px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tui-list-view {
		height: 250px;
		overflow: auto;
	}
	.tui-addr-box {
		padding: 14px;
		background-color: #fff;
		height: 100%;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}

	.tui-cell-title {
		font-size: 28rpx;
	}

	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}

	.tui-label-active {
		background: #ac9157;
		border-color: #ac9157;
		color: #fff;
	}

	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	::v-deep uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */

	.tui-addr-save {
		padding: 24rpx 60rpx;
		margin-top: 100rpx;
	}

	.tui-del {
		padding: 24rpx 60rpx;
	}
</style>